<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-input size="small" v-model="dictTreeSearchValue" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">字典状态:</p>
			</el-col>
			<el-col :span="3">
	
				<el-select v-model="dictStatus" size='small' clearable>
					<el-option label="已停用" value="0">
					</el-option>
					<el-option label="已启用" value="1">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" size="small" v-on:click='queryParamGrid'>查询</el-button>
			</el-col>
			<el-col :span="5" style="font-size:20px">
				当前分类：{{this.$data.curentPName}}
			</el-col>
			<el-col :span="8" style="text-align: right;margin-left:-10px;">
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<el-button type="primary" size="small" @click.native.prevent="edit()">编辑</el-button>
				<el-button type="primary" size="small" @click.native.prevent="start()">启用</el-button>
				<el-button type="primary" size="small" @click.native.prevent="stop()">停用</el-button>
	
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18" style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border stripe :data="params.dataList" style="width:100%" @selection-change="handleSelectionChange" height=460>
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<el-table-column prop="label" label="字典显示值" width="180">
					</el-table-column>
					<el-table-column prop="code" label="字典存储值" width="180">
					</el-table-column>
					<el-table-column prop="pCode" label="分组" width="200">
					</el-table-column>
					<el-table-column prop="type" label="类型" :formatter="valueCov">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="statusCov">
					</el-table-column>
					<!--<el-table-column label="操作"
									                 width="190"
									                 fixed="right">
										<template scope="scope">
											<el-tooltip class="item"
											            effect="light"
											            content="编辑"
											            placement="top">
												<el-button type="primary"
												           size="mini"
												           class="iconfont icon-dingdan"
												           @click.native.prevent="edit(scope.$index)"></el-button>
											</el-tooltip>
											<el-tooltip class="item"
											            effect="light"
											            content="启用"
											            placement="top">
												<el-button type="info"
												           size="mini"
												           class="iconfont icon-kaishi"
												           @click.native.prevent="start(scope.$index)"></el-button>
											</el-tooltip>
											<el-tooltip class="item"
											            effect="light"
											            content="停用"
											            placement="top">
												<el-button type="warning"
												           size="mini"
												           class="iconfont icon-stop"
												           @click.native.prevent="stop(scope.$index)"></el-button>
											</el-tooltip>
										</template>
									</el-table-column>-->
				</el-table>
	
				<el-pagination small @size-change="handleCurrentChange" @current-change="handleGroupCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="params.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--字典表单 -->
		<el-dialog title="字典信息" v-model="dictFormShow">
			<el-form :model="dictFormData" ref="dictForm" :rules="dictRule" label-width="100px">
				<el-form-item label="分组编码" prop="pCode">
					<el-input size="small" v-model="dictFormData.pCode" readonly></el-input>
				</el-form-item>
	
				<el-form-item label="显示值" prop="label" required>
					<el-input size="small" placeholder="" v-model="dictFormData.label">
					</el-input>
				</el-form-item>
				<el-form-item label="存储值" prop="code" required>
					<el-input size="small" placeholder="" v-model="dictFormData.code">
					</el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type" required>
					<el-select size="small" v-model="dictFormData.type" style="margin-left: -2px;" placeholder="请选择">
						<el-option label="字典分组" value="0"></el-option>
						<el-option label="字典项" value="1" selected></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dictFormShow = false">取 消</el-button>
				<el-button type="primary" @click="saveDict">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//分页设置
			page: this.page,
			//当前分组页
			curPage: 1,
			params: {
				dataList: [],
				total: 0
			},
			//查询条件-状态
			dictStatus: '',
			//字典树的过滤条件
			dictTreeSearchValue: '',

			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'label'
			},

			//树型数据
			paramTreeData: [],
			//默认选中的上级节点
			curentPCode: "-1",
			curentPName: "",

			//子菜单表格数据
			paramTabelData: [],
			//子系统下级
			sysChild: [],
			//模块下级
			moduleChild: [],
			//功能下级
			funcChild: [],
			//资源类型下拉数据
			resTypeComboData: [],
			//资源表单是否显示
			paraFormShow: false,

			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],

			//字典表单
			dictFormShow: false,
			dictEmptyData: {
				code: "",
				createTime: null,
				pCode: "",
				label: "",
				status: '1',
				updateUser: null,
				remark: null,
				createUser: null,
				updateTime: null,
				id: "",
				type: "",
			},
			//字典数据
			dictFormData: {
				code: "",
				createTime: null,
				pCode: "",
				label: "",
				updateUser: null,
				remark: null,
				createUser: null,
				updateTime: null,
				status: '1',
				id: "",
				type: "",
			},
			//校验规则
			dictRule: {
				label: [{
					required: true,
					message: '请输入名称',
					trigger: 'blur'
				}],
				pCode: [{
					required: true,
					message: '请输入父级编码',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '请输入编码',
					trigger: 'blur'
				}],

			},

		}
	},
	methods: {
		//分页查询
		handleCurrentChange: function () { },
		//字典分组,当前页切换
		handleGroupCurrentChange: function (currentPage) {
			this.$data.curPage = currentPage;
			this.queryParamGrid();
		},
		//查询树节点
		searchTree: function () {
			if (this.$data.dictTreeSearchValue == "") {
				this.$message("请输入查询条件");
				this.queryParamTree();
				return;
			}
			this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
		},
		//点击资源树节点
		handleNodeClick(data) {

			this.$data.curentPCode = data.code;
			this.$data.curentPName = data.label;
			this.queryParamGrid();
		},
		//复选框回调函数
		handleSelectionChange: function (val) {

			this.$data.multipleSelection = val;
			//this.reminderDelte();
		},
		reminderDelte: function () {

			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].id)
			} else {
				this.$message.error("请选择一条数据")
			}

		},

		//查询资源列表
		queryParamGrid: function () {
			this.$http.get(this.API_ROOT + '/base/dict/newPage', {
				params: {
					status: this.$data.dictStatus,
					pCode: this.$data.curentPCode,
					start: this.$data.curPage,
					limit: this.$data.page.pageSize
				}
			}).then((response) => {

				this.$data.params.total = Number(response.data.total);
				this.$data.params.dataList = response.data.dataList; //Object.assign(this.$data. paramTabelData, response.data.dataList);
			}, (response) => { });
		},

		//启用资源
		start: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/base/dict/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//停用资源
		stop: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/base/dict/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},

		//新增
		add: function () {
			//
			this.$data.dictFormData = Object.assign(this.$data.dictFormData, this.$data.dictEmptyData);
			this.$data.dictFormData.pCode = this.$data.curentPCode;
			this.$data.dictFormShow = true;
		},
		//编辑
		edit: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/base/dict/info', {
					params: {
						id: data,
					}
				}).then(function (resp) {
					// success callback
					//
					this.$data.dictFormData = Object.assign(this.$data.dictFormData, resp.data.data);
					this.$data.dictFormShow = true;
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//保存参数
		saveDict: function (index) {

			this.$refs.dictForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/base/dict/save', this.$data.dictFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.queryParamTree();
								this.queryParamGrid();
								this.$data.dictFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
		},

		//资源类型转换
		valueCov: function (row, column) {
			if (row.type == null || row.type == "") {
				return "";
			}
			return (row.type == "0" || row.type == 0) ? "分组" : "字典";
		},

		queryTree: function () {
			this.$http.get(this.API_ROOT + '/rbac/res/resTree', {}).then((response) => {
				this.$data.paramTreeData = response.data.dataList;
			}, (response) => { });
		},
		//资源过滤
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//查询参数树
		queryParamTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/base/dict/tree', {}).then((response) => {

				this.$data.paramTreeData = response.data.dataList;
			}, (response) => { });
		},

	},
	//组件创建时
	created: function () {
		//查询参数树
		this.queryParamTree();
	}

};
</script>
<style>

</style>